<template>
  <div class="viewAnalysis">
    <van-dropdown-menu overlay>
      <div id="title">我的</div>
      <van-dropdown-item v-model="value1" :options="option1" @change="getScore(value1)"/>
    </van-dropdown-menu>
  </div>
  <div class="datePage" v-if="data">
    <div class="van-hairline--bottom"></div>
    <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :touchable="false"
          :show-indicators="false"
      >
        <van-swipe-item v-if="data.moodIndex > 60" v-for="text in sentencesWhenPositive">{{text}}</van-swipe-item>
        <van-swipe-item v-else v-for="text in sentencesWhenNegative">{{text}}</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <div class="small-box"/>
    <van-space class="dates" direction="vertical">
      <div class="infos">
        <div id="info"><span style="font-weight: bold;font-size: 16px">心情指数</span></div>
        <div id="progress">
          <van-progress
              :percentage="data.moodIndex"
              :pivot-text="pivotText"
              pivot-color="#7232dd"
              color="linear-gradient(to right, #be99ff, #7232dd)"
              stroke-width="10px"
          />
        </div>
      </div>
      <div v-if="data.moodIndex < 60" class="infos-recommend">
        <van-tabs v-model:active="active">
          <van-tab title="视频" v-if="movies.length > 0">
            <van-swipe style="height: 63vh;" vertical>
              <van-swipe-item v-for="movie in movies">
                <iframe class="video" :src="movie" scrolling="no" border="0"
                        frameborder="no" framespacing="0" allowfullscreen="true">
                </iframe>
              </van-swipe-item>
            </van-swipe>
          </van-tab>
          <van-tab title="动态" v-if="dynamicPostList.length > 0">
            <van-swipe height="425px" width="200px" :autoplay="2000" indicator-color="black"  >
              <van-swipe-item v-for="post in dynamicPostList.slice(0,3)">
                <recommend-list :post="post"/>
              </van-swipe-item>
            </van-swipe>
          </van-tab>
        </van-tabs>
      </div>
    </van-space>
  </div>
  <div id="noData" v-else>
    <van-empty description="快去写一篇日记吧！">
      <van-button icon="edit" round plain color="#7232dd" class="bottom-button" @click="toWrite">写日记去</van-button>
    </van-empty>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user.js";
import myAxios from "../plugins/myAxios";
import {Notify} from "vant";
import {useRouter} from "vue-router";
import RecommendList from "../components/RecommendList.vue";
import {it} from "node:test";


onMounted( () => {
  getCurrentUser();
  getScore(new Date().getMonth())
})
const postList = ref()
const dynamicPostList = ref([])

const router = useRouter();
const data = ref();
const active = ref(0);
const pivotText = ref('')

const movies = [
    '//player.bilibili.com/player.html?aid=689838749&bvid=BV1224y1f7Hs&cid=882245495&page=1',
    '//player.bilibili.com/player.html?aid=383965547&bvid=BV1gZ4y1a7Bm&cid=715214919&page=1',
    '//player.bilibili.com/player.html?aid=566957383&bvid=BV16v4y1x7XC&cid=1011086017&page=1'
]

const value1 = ref(new Date().getMonth())

const sentencesWhenPositive = [
    "你总是那么乐观，真是太棒了！",
    "你对未来充满信心，这真是太好了。",
    "你总是能够积极面对困难，我真的很佩服你。",
    "继续保持这种积极的心态，你一定能够取得成功。",
    "你的积极心态一定会帮助你取得更大的成功。"
]
const sentencesWhenNegative = [
    "当你面对困难时，不要灰心。每一个挑战都是一个机会，让你变得更加坚强和勇敢。相信自己，你有能力克服一切困难。",
    "记住，成功不是一蹴而就的，它需要时间和努力。不要害怕失败，因为失败是成功的垫脚石。只要你坚持不懈，最终一定会取得成功。",
    "永远保持乐观和积极的态度。当你对自己充满信心时，你就能够发挥出最大的潜能。所以，无论遇到什么困难，都要保持微笑，相信未来一定会更加美好。",
    "我知道你现在感觉很难过，但是请记住，你并不孤独。",
    "我在这里支持你，愿意倾听你的感受。",
    "每个人都会经历困难和挫折，但是这些经历会让我们变得更加坚强。",
    "请相信，未来一定会更好。只要你不放弃，一定能够度过难关。",
]

const option1 = [
  { text: '一月', value: 0 },
  { text: '二月', value: 1 },
  { text: '三月', value: 2 },
  { text: '四月', value: 3 },
  { text: '五月', value: 4 },
  { text: '六月', value: 5 },
  { text: '七月', value: 6 },
  { text: '八月', value: 7 },
  { text: '九月', value: 8 },
  { text: '十月', value: 9 },
  { text: '十一月', value: 10 },
  { text: '十二月', value: 11 },
];

const getScore = async (mouth: number) => {
  const res = await myAxios.get(`/diary/scores?mouth=${mouth+1}`)
  if (res.code === 0){
    data.value = res.data;
    console.log(data.value)
    pivotText.value = data.value.moodIndex + '%'
  }else {
    Notify({type: "warning", message: `${mouth+1}月并没有写日记哦`, duration: 800});
    value1.value = new Date().getMonth();
    data.value = null;
    await router.replace('/date');
  }
}

function getRandomInt(min: number, max: number) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const toWrite = () => {
  router.push('/user/write')
};
onMounted(async () => {
  await getCurrentUser();
  postList.value = await myAxios.post('/post/list/page/vo', {
    pageSize: 10,
    current: 1
  })
  postList.value.data.records.map(item => {
    item.photos = JSON.parse(item.photos)
    if (item.type === '生活'){
      dynamicPostList.value.push(item)
    }
  })
})
</script>

<style scoped>
.dates {
  height: 100%;
  width: 100%;
}

#title {
  position: absolute;
  top: 2.1%;
  left: 35%;
  font-size: 15px;
}

.infos {
  position: relative;
  height: 150px;
  width: 88%;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: inset 5px 5px 10px #d9d9d9, inset -5px -5px 10px #ffffff;
  left: 4%;
}
.infos-recommend {
  position: relative;
  height: 63vh;
  width: 100vw;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: inset 5px 5px 10px #d9d9d9, inset -5px -5px 10px #ffffff;
}

#info {
  position: relative;
  left: 30px;
  top: 18px;
  text-align: center;
  width: 85%;
}

.viewAnalysis {
  height: 46px;
  text-align: center;
  border: #e0e0e0 solid 1px;
}

#progress {
  position: relative;
  top: 40%;
  height: 20%;
  width: 85%;
  left: 9%;
}

#desc {
  color: #5a9bfa;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
  top: 15%;
  margin: 12px;
  text-indent: 2em;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.bottom-button {
  width: 160px;
  height: 40px;
}
#noData {
  position: relative;
  top: 100px;
  height: 100%;
  width: 100%;
}
.video{
  position: absolute;
  top: 1vh;
  left: 6vw;
  border-radius: 16px;
  height: 56vh;
  width: 80vw;
}
</style>